Motion >> Repos - motion-next.git/blob

   1 <div ng-cloak layout="row" class="quick-filter-container" flex>
   2   <div
   3     ng-repeat="filter in vm.filters"
   4     ng-if="filter.ngIf ? $eval('vm.query.' + filter.ngIf) : true"
   5     layout="column"
   6     class="padding-horizontal-16"
   7   >
   8     <span class="font-size-10" translate="{{ filter.label }}" />
   9     <md-select
  10       ng-if="filter.type === 'select'"
  11       class="font-size-12 no-margin"
  12       ng-model="vm.query[filter.key]"
  13       ng-change="vm.search()"
  14       aria-label="Filter {{ filter.name }}"
  15     >
  16       <md-option
  17         ng-repeat="option in filter.options"
  18         ng-value="filter.ngValue ? option[filter.ngValue] : option.id"
  19         >{{ option.name }}</md-option
  20       >
  21       <md-option
  22         ng-repeat="option in filter.customOptions"
  23         ng-value="option.value"
  24         translate="{{ option.translate }}"
  25       ></md-option>
  26     </md-select>
  27
  28     <md-select
  29       ng-if="filter.type === 'multiselect'"
  30       multiple
  31       class="font-size-12 no-margin"
  32       ng-init="vm.onMultiselectInit(filter)"
  33       ng-model="vm.query[filter.key]"
  34       ng-disabled="filter.options.length === 0"
  35       ng-change="vm.onMultiselectSelection(filter)"
  36       md-selected-text="vm.placeholders[filter.key]"
  37       aria-label="Filter {{ filter.name }}"
  38     >
  39       <md-option
  40         ng-repeat="option in filter.options"
  41         ng-value="filter.ngValue ? option[filter.ngValue] : option.id"
  42         ng-disabled="filter.clearAll === false && vm.query[filter.key].length === 1 && vm.query[filter.key][0] === (filter.ngValue ? option[filter.ngValue] : option.id)"
  43       >
  44         {{ option.name }}</md-option
  45       >
  46       <md-button
  47         ng-if="vm.query[filter.key].length &lt; filter.options.length"
  48         ng-click="vm.selectAll(filter)"
  49         md-no-ink
  50         class="md-primary"
  51         layout-fill
  52       >
  53         {{'DASHBOARDS.SELECT_ALL' | translate}}</md-button
  54       >
  55       <md-button
  56         ng-if="vm.query[filter.key].length === filter.options.length"
  57         ng-click="vm.clearSelection(filter)"
  58         md-no-ink
  59         class="md-primary"
  60         layout-fill
  61       >
  62         {{'DASHBOARDS.CLEAR' | translate}}</md-button
  63       >
  64     </md-select>
  65
  66     <div
  67       ng-if="filter.type === 'date'"
  68       layout="row"
  69       layout-align="center center"
  70     >
  71       <md-date-range
  72         ng-init="vm.onDateRangeInit(filter)"
  73         localization-map="vm.localizationMap"
  74         ng-model="vm.pickerModels[filter.key]"
  75         auto-confirm="true"
  76         show-template="true"
  77         md-on-select="vm.onDateRangeSelection(filter)"
  78         placeholder="{{ 'DASHBOARDS.ALL' | translate }}"
  79       >
  80       </md-date-range>
  81       <md-button
  82         ng-if="vm.pickerModels[filter.key].dateStart"
  83         ng-click="vm.clearDate(filter)"
  84         class="md-icon-button no-margin no-padding width-20 height-20"
  85       >
  86         <md-icon
  87           md-font-icon="icon-close"
  88           class="quick-filter-date-clear-button s16"
  89         ></md-icon>
  90       </md-button>
  91     </div>
  92   </div>
  93 </div>